<template>
  <div class="min-h-screen bg-gradient-to-br from-slate-900 via-gray-900 to-black">
    <!-- 导航栏 -->
    <Navbar />

    <!-- 主要内容 -->
    <div class="max-w-6xl mx-auto px-6 py-12">
      <!-- 标题区域 -->
      <div class="text-center mb-16">
        <h1 class="text-5xl font-bold text-white mb-6">关于球球助手</h1>
        <p class="text-xl text-white/70 max-w-3xl mx-auto leading-relaxed">
          专业的足球数据查询平台，为足球爱好者提供比赛数据、球队信息等公开数据服务
        </p>
      </div>

      <!-- 平台介绍 -->
      <section class="mb-16">
        <div class="bg-white/5 backdrop-blur-lg border border-white/10 rounded-2xl p-8">
          <h2 class="text-3xl font-bold text-white mb-6">平台简介</h2>
          <div class="text-gray-300 leading-relaxed space-y-4">
            <p>
              球球助手是一个专注于足球数据查询的在线平台。我们整合公开的比赛数据、历史战绩、球队信息等，为足球爱好者提供便捷的数据查询和信息展示服务。
            </p>
            <p>
              我们的目标是帮助足球爱好者更好地了解比赛和球队，通过数据可视化让用户更直观地理解足球数据。平台提供的所有数据均来自公开渠道，仅供学习和参考使用。
            </p>
            <div class="bg-blue-900/20 border border-blue-500/20 rounded-lg p-4 mt-4 flex items-start gap-3">
              <span class="text-2xl mt-0.5">💡</span>
              <div>
                <p class="text-blue-400 font-semibold mb-2">服务说明</p>
                <p class="text-sm text-gray-300">
                  本平台是足球数据查询工具，仅提供公开的比赛数据展示和信息服务，所有数据仅供学习和了解足球比赛使用。
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 核心功能 -->
      <section class="mb-16">
        <h2 class="text-3xl font-bold text-white mb-8 text-center">核心功能</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <div class="bg-white/5 backdrop-blur-lg border border-white/10 rounded-xl p-6 hover:bg-white/10 transition-all">
            <div class="w-12 h-12 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-lg flex items-center justify-center mb-4">
              <span class="text-2xl">📊</span>
            </div>
            <h3 class="text-xl font-semibold text-white mb-3">数据展示</h3>
            <p class="text-gray-400 text-sm">基于历史数据和统计信息，提供多维度的比赛数据展示</p>
          </div>

          <div class="bg-white/5 backdrop-blur-lg border border-white/10 rounded-xl p-6 hover:bg-white/10 transition-all">
            <div class="w-12 h-12 bg-gradient-to-r from-orange-500 to-amber-500 rounded-lg flex items-center justify-center mb-4">
              <span class="text-2xl">🏆</span>
            </div>
            <h3 class="text-xl font-semibold text-white mb-3">比赛信息</h3>
            <p class="text-gray-400 text-sm">实时更新的比赛信息、赛程安排和球队数据</p>
          </div>

          <div class="bg-white/5 backdrop-blur-lg border border-white/10 rounded-xl p-6 hover:bg-white/10 transition-all">
            <div class="w-12 h-12 bg-gradient-to-r from-amber-500 to-yellow-500 rounded-lg flex items-center justify-center mb-4">
              <span class="text-2xl">🤖</span>
            </div>
            <h3 class="text-xl font-semibold text-white mb-3">数据查询</h3>
            <p class="text-gray-400 text-sm">提供便捷的数据查询功能，快速获取比赛信息</p>
          </div>

          <div class="bg-white/5 backdrop-blur-lg border border-white/10 rounded-xl p-6 hover:bg-white/10 transition-all">
            <div class="w-12 h-12 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-lg flex items-center justify-center mb-4">
              <span class="text-2xl">📈</span>
            </div>
            <h3 class="text-xl font-semibold text-white mb-3">历史记录</h3>
            <p class="text-gray-400 text-sm">完整的历史对战记录和数据统计</p>
          </div>

          <div class="bg-white/5 backdrop-blur-lg border border-white/10 rounded-xl p-6 hover:bg-white/10 transition-all">
            <div class="w-12 h-12 bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg flex items-center justify-center mb-4">
              <span class="text-2xl">⭐</span>
            </div>
            <h3 class="text-xl font-semibold text-white mb-3">个性推荐</h3>
            <p class="text-gray-400 text-sm">根据用户偏好提供个性化的比赛推荐</p>
          </div>

          <div class="bg-white/5 backdrop-blur-lg border border-white/10 rounded-xl p-6 hover:bg-white/10 transition-all">
            <div class="w-12 h-12 bg-gradient-to-r from-green-500 to-emerald-500 rounded-lg flex items-center justify-center mb-4">
              <span class="text-2xl">🔄</span>
            </div>
            <h3 class="text-xl font-semibold text-white mb-3">实时更新</h3>
            <p class="text-gray-400 text-sm">7x24小时实时更新比赛数据和分析结果</p>
          </div>
        </div>
      </section>

      <!-- 使用须知 -->
      <section class="mb-16">
        <div class="bg-white/5 backdrop-blur-lg border border-white/10 rounded-2xl p-8">
          <h2 class="text-3xl font-bold text-white mb-6">使用须知</h2>
          <div class="space-y-4 text-gray-300">
            <div class="flex items-start">
              <span class="text-yellow-400 mr-3 mt-1">1.</span>
              <div>
                <h4 class="font-semibold text-white mb-1">服务性质</h4>
                <p class="text-sm">本平台为足球爱好者提供数据查询和信息展示服务，所有数据均来自公开渠道，仅供学习和了解使用。</p>
              </div>
            </div>

            <div class="flex items-start">
              <span class="text-yellow-400 mr-3 mt-1">2.</span>
              <div>
                <h4 class="font-semibold text-white mb-1">数据来源</h4>
                <p class="text-sm">平台数据来源于公开渠道，我们会尽力保证数据准确性，但不对数据完整性和及时性做绝对保证。</p>
              </div>
            </div>

            <div class="flex items-start">
              <span class="text-yellow-400 mr-3 mt-1">3.</span>
              <div>
                <h4 class="font-semibold text-white mb-1">免责声明</h4>
                <p class="text-sm">平台数据仅供学习参考，我们不对数据准确性做绝对保证，也不对因使用本平台数据而产生的任何后果承担责任。</p>
              </div>
            </div>

            <div class="flex items-start">
              <span class="text-yellow-400 mr-3 mt-1">4.</span>
              <div>
                <h4 class="font-semibold text-white mb-1">使用提示</h4>
                <p class="text-sm">本平台仅提供足球数据查询服务，所有数据仅供学习和了解足球比赛使用。</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup lang="ts">
// SEO配置
useSEO({
  title: '关于我们 - 球球助手',
  description: '了解球球助手平台，我们是一个专注于足球数据查询的工具平台，为足球爱好者提供专业的数据服务。',
  keywords: '关于球球助手,足球数据查询,数据展示平台,足球信息',
});
</script>

<style scoped>
/* 自定义动画 */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.hover\:animate-float:hover {
  animation: float 2s ease-in-out infinite;
}
</style>
